<template>
	<el-dialog :visible.sync="visible" :modal-append-to-body="false" title="员工信息" class="demo-ruleForm">
		<el-form :model="model" :rules="rules" ref="modelForm" label-width="110px" @submit.native.prevent
			:inline="false">
			<el-form-item label="头像" prop="HeaderUrl">
				<uploadimg v-model="model.HeaderUrl"></uploadimg>
			</el-form-item>
			<el-form-item label="员工姓名" prop="SysEmployeeName">
				<el-input v-model="model.SysEmployeeName"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="SysEmployeePhone">
				<el-input v-model="model.SysEmployeePhone"></el-input>
			</el-form-item>

			<el-form-item label="所属店铺" prop="TempSysStoreID" v-if="user.isMainStore||user.isAdminStore">
				<remoteselect v-model="model.TempSysStoreID" url="api/System/SysStoreListSelect"
					value-label="SysStoreName" value-key="SysStoreID" query-key="selectIDName" placeholder="所属店铺"
					style="width:100%;">
					<template v-slot="{ row }">
						{{row.SysStoreName}}
					</template>
				</remoteselect>
			</el-form-item>

			<el-form-item label="是否能看手机号">
				<el-radio-group v-model="model.CanSeePhone">
					<el-radio v-for="item in EnumIsYes" :key="item.Value" :value="item.Value" :label="item.Value">
						{{item.Label}}
					</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="在职状态">
				<el-radio-group v-model="model.EnumQuitStatus">
					<el-radio v-for="item in EnumQuitStatus" :key="item.Value" :value="item.Value" :label="item.Value">
						{{item.Label}}
					</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否启用">
				<el-radio-group v-model="model.Operator.EnumStatus">
					<el-radio v-for="item in EnumStatus" :key="item.Value" :value="item.Value" :label="item.Value">
						{{item.Label}}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="所属角色">
				<!-- <el-select v-model="model.SysRoles" placeholder="请选择" style="width: 100%;" multiple filterable>
					<el-option v-for="item in SysRolePostList" :key="item.SysRolePostID" :value="item.SysRolePostID"
						:label="item.SysRolePostName">
						{{item.SysRolePostName + (user.isAdminStore ? ("-" + item.SysStoreName) : "")}}
					</el-option>
				</el-select> -->

				<remoteselect :multiple="true" v-model="model.SysRoles" url="api/System/SysRolePostListSelect"
					value-label="SysRolePostName" value-key="SysRolePostID" query-key="selectIDName" placeholder="所属角色"
					style="width:100%;">
					<template v-slot="{ row }">
						{{row.SysRolePostName + (user.isAdminStore ? ("-" + row.SysStoreName) : "")}}
					</template>
				</remoteselect>
			</el-form-item>

			<el-form-item label="登录帐号">
				<el-input v-model="model.UserCode"></el-input>
			</el-form-item>
			<el-form-item label="备注" prop="Remark">
				<el-input type="textarea" :rows="2" v-model="model.Remark"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
			<el-button type="primary" @click="save" :loading="loading">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "SysEmployeeAdd",
		mixins: [common.baseVM],
		data() {
			return {
				visible: false,
				loading: false,
				EnumIsYes: [{
					Value: false,
					Label: "否",
					Color: "green"
				}, {
					Value: true,
					Label: "是",
					Color: "red"
				}],
				//密码
				model: {
					SysEmployeeName: '',
					HeaderUrl: '',
					SysEmployeePhone: '',
					UserCode: "",
					SysEmployeeID: 0,
					EnumQuitStatus: 0,
					Remark: "",
					Operator: {
						EnumStatus: 1
					},
					SysRoles: [],
					CanSeePhone: false,
					TempSysStoreID: null
				},
				rules: {
					SysEmployeeName: [{
						required: true,
						message: '请输入员工姓名',
						trigger: 'blur'
					}],
					TempSysStoreID: [{
						required: true,
						message: '请选择所属店铺',
						trigger: 'blur'
					}],
					SysEmployeePhone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: function(rule, value, callback) {
								if (value == null || value == "") {
									callback(new Error('请输入手机号!'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					]
				},
				//SysRolePostList: [],
				defaultPic: "/static/img/inventor-2.png"
			}
		},
		computed: {
			EnumQuitStatus() {
				var temp = EnumQuitStatus;
				if (temp == null) return [];
				return temp;
			},
			EnumStatus() {
				var temp = EnumStatus;
				if (temp == null) return [];
				return temp;
			},
			currentDefaultPic() {
				return location.origin + this.defaultPic;
			}
		},
		methods: {
			init() {},

			show(row) {
				// if (this.SysRolePostList == null || this.SysRolePostList.length <= 0) {
				// 	this.post('api/System/SysRolePostListSelect').then(data => {
				// 		this.SysRolePostList = data.Result;
				// 	});
				// }
				this.resetVal("model");
				if (row == null || row.SysEmployeeID <= 0) {
					//初始值
					this.model.TempSysStoreID = this.user.sysStoreID;
					this.visible = true; //新建
					return;
				}
				this.get("api/System/SysEmployeeAdd?id=" + row.SysEmployeeID).then((data) => {
					this.model = data.Result;
					//默认显示头像
					if (!this.model.HeaderUrl) {
						this.model.HeaderUrl = this.currentDefaultPic;
					} else {
						this.model.HeaderUrl = this.commonUrl(this.model.HeaderUrl);
					}
					this.visible = true; //编辑
				});
			},
			close() {
				this.visible = false;
			},
			save() {
				this.formValidate("modelForm", () => {
					this.loading = true;
					var post = JSON.parse(JSON.stringify(this.model));
					if (post.HeaderUrl == this.currentDefaultPic) post.HeaderUrl = "";
					this.post("api/System/SysEmployeeAdd", post).then((data) => {
						this.showToast(data.Message, "success");
						this.visible = false;
						this.loading = false;
						this.$emit("success");
					}).catch(() => {
						this.loading = false;
					});
				});
			}
		}
	}
</script>
